<style lang="less" rel="stylesheet/less">
  .address-modal{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
    transition: all .3s ease;

    .address-box{
      width: 550/75rem;
      padding: 29/75rem;
      background-color: #fff;
      box-shadow: 0 5/75rem 30/75rem rgba(0,0,0,.2);
      border-radius: 15/75rem;
      h1{
        text-align: center;
        font-size: 30/75rem;
        color: #000;
      }
    }
    input,select{
      margin-bottom:20/75rem;
    }
    .placeholder {
      color: #ccc;
      display:none;
    }
    textarea {
      height:150/75rem;
      margin-bottom:20/75rem;
    }
    input:first-of-type
    {
      margin-top:40/75rem;
    }
    input, textarea, select {
      font-size: 1em;
      padding:  20/75rem;
      width: 100%;
      border: 1px solid #cecece;
      background: #f0f0f0;
      color:#333;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      max-width: 600px;
    }
    ::-webkit-input-placeholder {
      color: #ccc;
    }
    button {
      display: block;
      width: 280/75rem;
      height: 78/75rem;
      margin:  0 auto;
      border-radius: 5px;
      border: 1px solid #ffb230;
      -webkit-transition: .5s;
      background-color: #ffb230;
      transition: .5s;
      cursor: pointer;
      font-size: 30/75rem;
      color:#fff;
    }
    button:hover, .button:hover {
      background:lighten(#ffb230, 10%);
    }
  }
  .address-box-enter, .address-box-leave-active {
    transform: scale(.5,.5);
    opacity: 0;
  }
</style>
<template>
  <transition name="address-box">
    <div class="address-modal" v-show="value" >
      <div class="address-box" @click.stop>
        <h1>请输入收货地址</h1>
        <input type="text" name="name" placeholder="姓名" v-model.trim="name"/><br />
        <input  type="email" name="email" placeholder="电话" v-model.trim="phone" /><br />
        <select v-model="area" >
          <option value="" selected disabled>选择区域</option>
          <option value="鹿城区">鹿城区</option>
          <option value="龙湾区">龙湾区</option>
          <option value="瓯海区">瓯海区</option>
          <option value="洞头区">洞头区</option>
          <option value="瑞安市">瑞安市</option>
          <option value="乐清市">乐清市</option>
          <option value="永嘉县">永嘉县</option>
          <option value="平阳县">平阳县</option>
          <option value="泰顺县">泰顺县</option>
          <option value="文成县">文成县</option>
          <option value="苍南县">苍南县</option>
        </select>
        <textarea type="text" name="message" placeholder="详细地址，如街道、楼牌号等,如果选择自提，可不填" v-model.trim="detail"></textarea>
        <button id="submit" type="button" @click="submit">
          确定
        </button>
      </div>
    </div>
  </transition>
</template>

<script>
  import store2 from 'store2'
  import {validate} from '@utils'
  export default {
    props: ['value'],
    data() {
      return  {
        name: '',
        phone: '',
        area: '',
        detail: ''
      }
    },
    mounted() {

      if(store2.has('renegade-address')) {
        let address = JSON.parse(store2('renegade-address'));
        this.name = address.name;
        this.phone = address.phone;
        this.area = address.area;
        this.detail = address.detail;
      }
    },
    methods: {
      close () {
        this.$parent.visable = false;
      },
      submit() {
        if (!validate.minLength(this.name, 1)) {
          this.$store.dispatch('global/toast', '请输入姓名');
          return false;
        }
        if (!validate.mobile(this.phone)) {
          this.$store.dispatch('global/toast', '请输入手机号');
          return false;
        }
        if (this.area == '') {
          this.$store.dispatch('global/toast', '请选择区域');
          return false;
        }
        if (this.detail == '' && this.$parent.oPickUp ==0) {
          this.$store.dispatch('global/toast', '请填写详细地址');
          return false;
        }
        let data = {
          name: this.name,
          phone: this.phone,
          area: this.area,
          detail: this.detail
        }
        store2('renegade-address', JSON.stringify(data));
        this.$parent.getAddress()
        this.close()
      }
    }
  }
</script>
